
$mainColor:#23a8f5;

body{background-color:#EFF0F4;}

[data-toggle="fold"]{
   height:51px; 
   line-height:51px;
   border-bottom:1px solid #eaf0f2;
   &:hover{background-color:#fff; border:0;}
}

.btn-active{
    background-color:$mainColor;
    color:#fff;
    border-radius:4px;
    cursor:pointer;
    &:hover{
        outline: none;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
        color: #353F4F;
        text-decoration: none;
    }
}

.btn-tinge{
    display:inline-block;
    height:100%;
    color:#95a0a3;
    &:hover{
        color:$mainColor;
    }  
}

i{font-style:normal;}

.left-aside{
    width:240px; 
    height:100%;
    background-color:#fff; 
    border-right:1px solid #e2eaed;
    position:fixed; 
    top:0;
    padding-top:61px;
    z-index:99;
    box-sizing:border-box;
    
    .aside-wrapper{
        height:100%;
    }
    
    .left-bar{
        min-height:100%;
        margin-bottom:1px;
    }
}

.left-bar{
   padding-left:0;
   padding-right:0;
   height:inherit;
   
   .icon-geren,
   .icon-rongyu{
       margin-right:7px;
       position:relative;
       top:1px;
    }
    
    .icon-geren{color:#17C2C2;}
    .icon-rongyu{color:#9369f9;}
   
   .item{
       position:relative;
       padding-left:20px;
       padding-right:20px;
       height:41px;
       line-height:41px;
       margin:0;
       border-bottom:1px solid #eaf0f2;
       box-sizing: border-box;

       &:first-child{
           height:50px; 
           line-height:50px;
           //border-bottom:0;
           &:hover{background-color:#fff;}
       }
       

       
       &:hover{
           background-color:#f5f8f9;
       }
       
       i.fileicon,
       i.fileicon-copy{
           color:$mainColor;
           font-size:30px;
           margin-right:10px;
           margin-left:0;
       }
       
       i.fileicon-copy{
           font-size:26px;
           position:relative;
           top:3px;
       }
       
       .progress-name{
           margin-left:0;
           &:hover{color:#333;}
       }
       
       span{
           position:absolute;
           right:20px;
           top:0;
           display:none;
           
           &:hover{color:$mainColor;}
           
            i{
               margin-left:10px;
               font-size:14px;
               &:hover{
                   color:$mainColor;
               }
           }
       }
       
       /*
       .btn-select{
            position:relative;
            top:2px;
            //right:0;
            font-size:14px;
            color:#9e9da4;
            margin:0;
            
            &:hover{color:$mainColor;}
            
            span{
                width:110px;
                border:1px solid #f2f2f2;
                position:absolute;
                right:100%;
                top:0;
                background-color:#2f2f2f;
                border-radius:2px;
                //display:none;
                z-index:999;
                box-shadow:0 0 8px #E1E1E1;
                
                i{
                    display:block;
                    width:100%;
                    height:40px;
                    line-height:40px;
                    text-align:center;
                    color:#fff;
                    cursor:pointer;
                    
                    &:first-child{border-bottom:1px solid #373737;}
                }
                
            }
        }*/
        
   }
   
   .item:hover>span{display:inline-block;}
    
   a{cursor:pointer;}
}

.new-progress{
    width:110px;
    height:31px;
    line-height:31px;
    margin-top:20px;
    margin-bottom:20px;
    color:$mainColor;
    
    &+div{border-top:1px solid #eaf0f2;}
    
    &:hover{color:#333;}
    
    i{
        position:relative; 
        top:1px;
        margin-left:8px;
    }
}


.left-bar .active{
    background-color: #f5f8f9;
    border-color: #e2eaed;
}

.left-bar .allItem{
    width:100%;
    height: 50px;
    line-height: 50px;
    padding-left: 20px;
    padding-right: 20px;
    border:1px solid #eaf0f2;
    margin:0;
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
}


/*----------------------------------------------
 * right-header
 -----------------------------------------------*/

.date{
    min-width:280px;
    float: left;
    position:relative;
    margin-left: 60px;
    i{
        position:absolute;
        right:30px;
        top:30px;
        font-size:28px;
        color:$mainColor;
    }
}

.right-header{
    height:80px;
    background-color:#fff;
    overflow:hidden;
    .invitation{
        width:130px;
        height:44px;
        line-height:44px;
        margin-top:18px;
        i{position:relative; top:1px;}
    }
    .title{
        font-size:1.2em;
        float: left;
        padding-left:40px;
        span{
            display:block;
            width:70px;
            height:80px;
            line-height:80px;
            border-bottom:3px solid $mainColor;
            box-sizing:border-box;
        }
    }
    .searchUser{
      float: left;
      width: 440px;
      margin-left: 60px;
      height:44px;
      line-height:44px;
      margin-top:18px;
      border:1px solid $mainColor;
      color: $mainColor;
      border-radius: 3px;
      padding:0 15px;
      overflow: hidden;
      input{
        border: none;
        height: 42px;
        outline: none;
        display: block;
        float: left;
        width: 400/440 * 100%;
      }
      i{
        display: block;
        float: right;
        cursor: pointer;
      }
    }
    
}